<template>
    <el-row class="headWrap" :style="{'height':headWrapHei+'px'}">
        <el-row class="headWrapInner" type="flex">
            <el-col class="logo">
                <img
                    :style="{'height':logoHeight+'px'}"
                    :src="require('@/assets/img/home/logo2@3x.png')" 
                    alt="logo"
                    @click="home()">
            </el-col>
            <el-col id="nav">
                <el-row class="navinner">
                    <router-link
                        :to="route[index]"
                        @mouseover.native="setCurrentHoverIdx(index)"
                        @mouseleave.native="setCurrentHoverIdx(null)"
                        replace
                        class="navitem"
                        :key="item"
                        v-for="(item,index) in nav">
                        <span>
                            {{item}}
                            <img
                                class="activeImg"
                                src="@/assets/img/head/headActive.png" 
                                alt="active">
                        </span>
                        <span class="point"></span>
                        <DropMenu 
                            v-show="hoverCurrent===index"
                            :route="route[index]" 
                            class="dropmenu"/>
                    </router-link>
                </el-row>
            </el-col>
            <el-col class="langSwitch">
                <LangSwitch/>
            </el-col>
        </el-row>
    </el-row>
</template>

<script>
import LangSwitch from '@/components/langSwitch';
import DropMenu from '@/components/dropMenu';
export default {
    components:{LangSwitch,DropMenu},
    data(){
        return {
            hoverCurrent:null,
            headWrapHei:128,
            logoHeight:45,
            route:["/introduce","/news","/products","/case","/standard","/advantage","/cooperation","/contact"],
        }
    },
    mounted(){
        window.addEventListener('scroll',e=>{
            const scrollTop = document.documentElement.scrollTop;
            if(scrollTop!==0) {
                this.headWrapHei = 55;
                this.logoHeight = 45;
            }else{
                this.headWrapHei = 128;
                this.logoHeight = 45;
            }
        })
    },
    computed:{
        nav(){
            return this.$t("head.nav");
        }
    },
    methods:{
        home() {
            this.$router.replace('/');
        },
        setCurrentHoverIdx(idx){
            this.hoverCurrent = idx;
        }
    }
}
</script>

<style lang="less" scoped>
.headWrap {
    align-items: center;
    background:rgba(255,255,255,1);
    box-shadow:0px 3px 6px 0px rgba(0, 0, 0, 0.1);
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10;
    transition: all .3s ease;
    .headWrapInner {
        align-items: center;
        height: 100%;
        min-width: 1200px;
        max-width: 1366px;
        margin: 0 auto;
    }
    .logo {
        flex: 0 0 148px;
        img {
            width: 100%;
            height: 45px;
            cursor: pointer;
        }
    }
    #nav {
        flex:1;
        .navinner {
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0 40px;
            .navitem {
                flex: 1;
                cursor: pointer;
                user-select: none;
                text-decoration: none;
                position: relative;
                span {
                    font-size:16px;
                    font-weight:bold;
                    color:rgba(102,102,102,1);
                    line-height:24px;
                    display: inline-block;
                    position: relative;
                    .activeImg {
                        position: absolute;
                        width: 64px;
                        height: 10px;
                        margin-left: -32px;
                        left: 50%;
                        bottom: -16px;
                        display: none;
                    }
                }
                .point {
                    width:6px;
                    height:6px;
                    background:rgba(204,204,204,1);
                    border-radius:50%;
                    display: inline-block;
                    margin-left: 20px;
                }
                &:last-child {
                    .point {
                        display: none;
                    }
                }
                .dropmenu {
                    position: absolute;
                    left: 20px;
                    top: 34px;
                }
            }
        }
    }
    .langSwitch {
        flex: 0 0 88px;
    }
}
.router-link-active {
    &>span {
        color: #D73A42!important;
    }
    .activeImg {
        display: inline-block!important;
    }
}
</style>